<template>
  <div> <!--vue组件中不能存在多个div并行-->
    <div style="padding: 10px 0">
      <el-input style="width: 200px" placeholder="输入答者账号" suffix-icon="el-icon-user" v-model="searchData.account"></el-input>
      <el-input style="width: 200px" placeholder="输入问卷名称" suffix-icon="el-icon-document" class="ml-5"></el-input>
      <!--           <el-input style="width: 200px" placeholder="请输入地址" suffix-icon="el-icon-position" class="ml-5"></el-input>-->
      <el-button class="ml-5" style="background-color:#42b983;color: #FFFFFF" @click="load">搜索 </el-button>
      <el-button style="background-color:#4198b9;color: #FFFFFF" @click="reset">重置</el-button>
    </div>

    <div style="margin: 10px 0">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item >
                <el-popconfirm style="margin: 0"
                               class="ml-5"
                               title="确定批量不计入统计？"
                               @confirm="disuseBatch"
                >
                  <el-button style="margin-left: 10px;background-color: #E62222;color: #FFFFFF;border: #E62222" round slot="reference">批量不计入统计<i class="el-icon-remove-outline"></i> </el-button>
                </el-popconfirm>
<!--          <el-popconfirm-->
<!--              class="ml-5"-->
<!--              title="确定批量不计入统计？"-->
<!--              @confirm="disuseBatch"-->
<!--          >-->
<!--            <button class="noselect" slot="reference">-->
<!--              <span class="text" >不计入统计</span>-->
<!--              <span class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"></path></svg>-->
<!--          </span>-->
<!--            </button>-->
<!--          </el-popconfirm>-->
        </el-form-item>
        <el-form-item >
                <el-popconfirm style="margin: 0"
                               class="ml-5"
                               title="确定批量计入统计？"
                               @confirm="disuseBatch"
                >
                  <el-button style="margin-left: 10px;background-color: #42B999;color: #FFFFFF;border: #42B999" type="success" round slot="reference">批量计入统计<i class="el-icon-circle-check"></i> </el-button>
                </el-popconfirm>
<!--          <el-popconfirm-->
<!--              class="ml-5"-->
<!--              title="确定批量计入统计？"-->
<!--              @confirm="disuseBatch"-->
<!--          >-->
<!--            <button class="noselect" slot="reference">-->
<!--              <span class="text" >计入统计</span>-->
<!--              <span class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"></path></svg>-->
<!--          </span>-->
<!--            </button>-->
<!--          </el-popconfirm>-->
        </el-form-item>
      </el-form>
      <el-button style="margin-left: 700px" class="ml-5">导出<i class="el-icon-top"></i> </el-button>
    </div>
    <el-table v-show="mainTableVisible" :data="tableData" border stripe :header-cell-class-name="headerBg"  @selection-change="handleSelectionChange">>
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="id" label="ID" width="70">
      </el-table-column>
      <el-table-column prop="account" label="答者账号" width="140">
      </el-table-column>
      <el-table-column prop="subscription" label="参与的问卷" width="240">
      </el-table-column>
      <el-table-column prop="time" label="参与时刻" width="190">
      </el-table-column>
      <el-table-column prop="consume" label="回答用时" width="110">
      </el-table-column>
      <el-table-column prop="state" label="状态" width="140">
      </el-table-column>
      <el-table-column prop="stats" label="是否计入统计" width="120">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
<!--          <el-button type="success" @click="handleBrowse(scope.row)" style="padding: 5px">作答详细<i class="el-icon-tickets"></i> </el-button>-->
          <button class="edit" @click="handleBrowse(scope.row)" style="margin-top: 5px">
            <svg class="css-i6dzq1" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2" stroke="#FFFFFF" height="24" width="24" viewBox="0 0 24 24">
              <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
            </svg>作答详细</button>
          <el-popconfirm
              class="ml-5"
              title="确定将其不计入统计？"
              @confirm="handleDisuse(scope.row.id)"
          >
<!--            <el-button type="danger" slot="reference" style="padding: 5px">将其不计入统计<i class="el-icon-remove-outline"></i></el-button>-->
            <button class="noselect"  style="border-radius: 50px;" slot="reference">
              <span class="text" style="font-size: 13px;font-weight: normal;">不计入统计</span>
              <span class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"></path></svg>
          </span>
            </button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <el-dialog :append-to-body="true" :title.sync="infoDialogTitle" :visible.sync="infoDialogVisible" width="30%">
      <el-form>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "RespondentManage",
  data(){
    return{
      tableData: [{
        id: 212,
        account: '小智',
        subscription: '大学生网络游戏调查问卷',
        consume: '00:12:34',
        time: '2022-8-22 14:01:30',
        state: '作答完成',
        stats: '是'
      }, {
        id: 213,
        account: '莎莉娜',
        subscription: '周末聚餐投票',
        consume: '00:06:17',
        time: '2022-8-23 11:21:50',
        state: '作答完成',
        stats: '是'
      }, {
        id: 214,
        account: '希特隆',
        subscription: '后疫情时代下大学生旅游意愿调查',
        consume: '00:18:26',
        time: '2022-10-16 16:17:23',
        state: '作答完成',
        stats: '是'
      }, {
        id: 215,
        account: '柚丽嘉',
        subscription: '后疫情时代下大学生旅游意愿调查',
        consume: '00:03:12',
        time: '2022-10-16 18:23:17',
        state: '未完成',
        stats: '是'
      }],
      total:3,
      searchData:{},
      account:"",
      pageNum:1,
      pageSize:5,
      infoDialogTitle: '浏览作答详细',
      infoDialogVisible:false,
      mainTableVisible:true,
      form:{},
      multipleSelection:[],
      headerBg: 'headerBg'
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      // this.request.get("http://localhost:9090/billing/page",{
      //   params:{
      //     pageNum: this.pageNum,
      //     pageSize:this.pageSize,
      //     account:this.searchData.account
      //   }
      // }).then(res =>{
      //   this.tableData=res.records
      //   this.total=res.total
      // })
    },
    save() {
      if (this.form.id == null) {
        this.form.type = "billing"
        this.form.state = 1
      }
      // this.request.post("http://localhost:9090/billing/save",this.form).then(res =>{
      //   if(res){
      //     this.dialogFormVisible=false;
      //     this.pageNum=Math.floor(this.total/this.pageSize+1)
      //     this.reset()
      //     this.$message.success("保存成功")
      //   } else{
      //     this.$message.error("保存失败")
      //   }
      // })
    },
    handleBrowse(row) {
      this.form = row
      this.infoDialogVisible = true;
    },
    handleRenewal(row) {
      this.form = row
      this.renewalDialogVisible = true;
    },
    handleDisuse(id) {
      // this.request.delete("http://localhost:9090/billing/"+id).then(res =>{
      //   if(res){
      //     this.dialogFormVisible=false;
      //     this.reset()
      //     this.$message.success("中止成功")
      //   } else{
      //     this.$message.error("中止失败")
      //   }
      // })
    },
    disuseBatch() {
      // let ids = this.multipleSelection.map(v => v.id)
      // this.request.post("http://localhost:9090/billing/del/batch",ids).then(res =>{
      //   if(res){
      //     this.dialogFormVisible=false;
      //     this.reset()
      //     this.$message.success("中止成功")
      //   } else{
      //     this.$message.error("中止失败")
      //   }
      // })
    },
    reset() {
      this.searchData = {}
      this.load()
    },
    cancel() {
      this.infoDialogVisible = false
      this.load()
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style scoped>

</style>